<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="500" @ok="handleSubmit">
      <a-form ref="formEl" :model="planModel" :label-col="{xs: {span: 24}, sm: {span: 6}}" :wrapper-col="{xs: {span: 24}, sm: {span: 18}}">
        <a-row>
          <a-col :span="22">
            <a-form-item label="代扣银行" name="bank" v-if="props.userData.showbank">
              <JSearchSelect
                placeholder="请输入代扣银行"
                showSearch
                dict="SYS_DICT_ITEM,ITEM_TEXT,ITEM_VALUE, DICT_ID in (select ID from SYS_DICT where DICT_CODE='pay_bank') "
                v-model:value="planModel.bank"
                optionFilterProp="label"
                resultField="list"
                labelField="name"
                valueField="id"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
        <a-col :span="22">
          <a-form-item label="计收月份" name="sfyf" v-if="props.userData.showsfyf">
            <a-month-picker placeholder="请输入计收月份" valueFormat="YYYY-MM" v-model:value="planModel.sfyf" />
          </a-form-item>
        </a-col>
        </a-row>

        <a-row>
          <a-col :span="22">
            <a-form-item label="企业性质" name="qyxz" v-if="props.userData.showqyxz">
              <JSearchSelect
                placeholder="请输入企业性质"
                dict="DB_QYXZB,QYXZ,QYXZ"
                showSearch
                v-model:value="planModel.qyxz"
                optionFilterProp="label"
                resultField="list"
                labelField="name"
                valueField="id"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="22">
            <a-form-item label="所属行业" name="sshy" v-if="props.userData.showsshy">
              <JSearchSelect
                placeholder="请输入所属行业"
                dict="DB_HYLXB,HYLX,HYLX"
                showSearch
                v-model:value="planModel.sshy"
                optionFilterProp="label"
                resultField="list"
                labelField="name"
                valueField="id"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="22">
            <a-form-item label="企业名称" name="qymc" v-if="props.userData.showqymc">
              <JSearchSelect
                placeholder="请输入企业名称"
                dict="DB_QYZLB,MC,MC"
                :async="true"
                :pageSize=5
                showSearch
                v-model:value="planModel.qymc"
                optionFilterProp="label"
                resultField="list"
                labelField="name"
                valueField="id"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="22">
            <a-form-item label="收款种类" name="type"  v-if="props.userData.showtype">
<!--              <a-select v-model:value="planModel.type"  placeholder="请选择收款类别">
                <a-select-option value="租金">租金</a-select-option>
                <a-select-option value="土地使用补偿款">土地使用补偿款</a-select-option>
              </a-select>-->

              <JSearchSelect
                placeholder="请选择收款类别"
                v-model:value="planModel.type"
                :dictOptions = "dictOptions"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    <template #appendFooter>
    </template>
  </BasicModal>

</template>

<script lang="ts" setup>
  import { optionsListApi } from '/@/api/demo/select';
  import {ref, computed, unref, reactive,defineProps } from 'vue';
  import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
  import {BasicForm, FormSchema, useForm,ApiSelect,JSearchSelect} from '/@/components/Form/index';
  import {formSchema} from '../DbGlfsc.data';
  import {saveOrUpdate} from '../DbGlfsc.api';
  import {defHttp} from "/@/utils/http/axios";
  import {apiGlfsc} from "../DbGlfsc.api";
  // import DbGlfscModal from "./DbGlfscModal.vue"

  import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
  import {useMessage} from "/@/hooks/web/useMessage";
  import { useMethods } from '/@/hooks/system/useMethods';
  import {filterObj} from "/@/utils/common/compUtils";
  import {getIfExportFapiao} from "/@/views/assets/accountReceive/DbHire.api";
  const { createMessage, createErrorModal } = useMessage();
  //ajax请求api接口
  const { createConfirm } = useMessage();

  const { handleExportXls, handleImportXls } = useMethods();
  const planModel = reactive({ });
  const props = defineProps({userData:{}});
  //设置标题
  const title1 = ref("导出");//computed(() => (!unref(props.userData.title) ? props.userData.title : '编辑'));


  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {

  });


  const dictOptions = [{
    text:"无",
    value:"无"
  },{
    text:"租金",
    value:"租金"
  },{
    text:"土地补偿款",
    value:"土地补偿款"
  },{
    text:"其他",
    value:"其他"
  }];

  const title = computed(() => {
    console.log(props.userData)
    if(props.userData?.title){
      title1.value = props.userData.title;
    }
    return !unref(title1) ? '导出' : title1.value});
  //表单提交事件
  async function handleSubmit(v) {
    console.log(planModel)
    if(!planModel.sfyf) {
      createMessage.warn("请选择收款月份！")
      return;
    }
    if(title.value=="开发票导出"){

      let res = await getIfExportFapiao(planModel)
      console.log(res)

      if(res!="") {
        createConfirm({
          iconType: 'warning',
          title: '确认导出',
          content: res+",是否重复导出？",
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            closeModal();
            handleExportXls(title as string,props.userData.url , filterObj(planModel));
          }
        });
        return;
      }

    }
    closeModal();
    handleExportXls(title as string,props.userData.url , filterObj(planModel));
  }
  function handleSuccess(){

  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number){
    width: 100%
  }

  :deep(.ant-calendar-picker){
    width: 100%
  }
</style>
